import React, { PureComponent } from 'react'
import { Modal, Form, Input } from 'antd'

import PropTypes from 'prop-types'

// import Style from './sendMessageModal.css'

const { TextArea } = Input

class sendMessageModal extends PureComponent {
  static propTypes = {
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    onOk: PropTypes.func
  }

  constructor (props) {
    super(props)
    this.state = {
    }
  }

  handleOnOk = () => {
    const { form, onOk } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        onOk(values)
      }
    })
  }

  render () {
    const { visible, onCancel, form } = this.props
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    }
    return (
      <Modal
        title='发送站内信'
        visible={visible}
        onCancel={onCancel}
        onOk={this.handleOnOk}
      >
        <Form {...formItemLayout}>
          <Form.Item label='标题'>
            {getFieldDecorator('title', {
              rules: [{ required: true, message: '请输入站内信标题' }, { max: 20, message: '最多输入20字' }]
            })(<Input style={{ width: 250 }} />)}
          </Form.Item>
          <Form.Item label='内容' help='站内信标题不能超过20个字，内容不能超过100个字。'>
            {getFieldDecorator('content', {
              rules: [{ required: true, message: '请输入站内信内容' }, { max: 100, message: '最多输入100字' }]
            })(<TextArea />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }
}

export default Form.create()(sendMessageModal)
